<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrap{
				width: 500px;
				height: 500px;
				padding:100px;
				background-color: #000;
			}
			.child{
				width: 500px;
				height: 500px;
				background-color: #f00;
			}
			#templateItem{display:none;}
			.list{
				padding:30px;
				border:1px solid #e3e3e3;
			}
		</style>
	</head>
	<body>
		<ul class="list">
			<li>list1</li>
			<li>list2</li>
			<li>list3</li>
			<li id="templateItem"></li>
		</ul>
		
		<button id="addItem">点我</button>
	</body>
	<script src="machine.js"></script>
	<script>
		var ul = $(".list");
	
		
		
		ul.onclick = function(e){
			// if(_this.tagName == "LI"){
			// 	console.log(e.target.innerHTML)
			// }
		}
		
		
		
		
		$("#addItem").onclick = function(){
			var newItem = $("#templateItem").cloneNode(true)
			newItem.innerHTML = 'empty';
			newItem.id = "";
			ul.appendChild(newItem);
		}
	</script>
</html>
